<template>
    <div class="product_selection">
        <div class="page_img"></div>
        <div class="header">
            <van-nav-bar title="流水"/>
        </div>
        <div class="revenue">
            <div v-for="(item, index) in revenueList" :key="index" class="revenue_items">
                <div class="revenue_items_left">
                    <van-image :src="item.imgs"></van-image>
                    <div class="revenue_numsName">
                        <div class="number">{{ item.number }}</div>
                        <div class="des">{{ item.des }}</div>
                    </div>
                </div>
                <div class="links" @click="goPath(item.links)">{{ item.name }}</div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from "vue-router";
import { getFlowingCount } from '@/api/productHome/index'
const router = useRouter();
const chuku = new URL("@/assets/revenue/icon_chuku.png", import.meta.url).href;
const diaobo = new URL("@/assets/revenue/icon_diaobo.png", import.meta.url).href;
const pandian = new URL("@/assets/revenue/icon_pandian.png", import.meta.url).href;
const ruku = new URL("@/assets/revenue/icon_ruku.png", import.meta.url).href;
const shangjia = new URL("@/assets/revenue/icon_shangjia.png", import.meta.url).href;
// const shoumai = new URL("@/assets/revenue/icon_shoumai.png", import.meta.url).href;
const xiajia = new URL("@/assets/revenue/icon_xiajia.png", import.meta.url).href;

const revenueList = ref([
    { number: 0, imgs: ruku, des: '今日入库', name: '入库记录', links: '/warehousingRecord', auditStatus: '入库' },
    { number: 0, imgs: shangjia, des: '今日上架', name: '上架记录', links: '/listingRecord', auditStatus: '上架' },
    { number: 0, imgs: chuku, des: '今日出库', name: '出库记录', links: '/outboundRecord', auditStatus: '出库' },
    { number: 0, imgs: pandian, des: '今日盘点', name: '盘点记录', links: '/inventoryRecord', auditStatus: '盘点' },
    { number: 0, imgs: diaobo, des: '今日调拨', name: '调拨记录', links: '/transferRecord', auditStatus: '调拨' },
    // { number: 0, imgs: shoumai, des: '今日售卖', name: '售卖记录', links: '' ,auditStatus: '入库'},
    { number: 0, imgs: xiajia, des: '今日下架', name: '下架记录', links: '/offShelf', auditStatus: '下架' },
])

/** 记录跳转 */
const goPath = (links: string) => {
    router.push(links)
}
/** 获取当日统计数量 */
const getList = async () => {
    const res = await getFlowingCount()
    revenueList.value.forEach((item: any, index: number) => {
        res.data.forEach(element => {
            if (element.auditStatus == item.auditStatus) {
                revenueList.value[index].number = element.total
            }
        });
    })
}
getList()
</script>
<style lang="less" scoped>
.revenue {
    width: 100%;
    height: calc(100vh - 90px);
    overflow: auto;
    position: relative;
    z-index: 2000;
    background: #F6FAFF;
    border-radius: 15px 15px 0px 0px;
    box-sizing: border-box;
    padding: 0 15px;

    .revenue_items {
        margin: auto;
        width: 345px;
        height: 74px;
        background: #FFFFFF;
        border-radius: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        margin-top: 10px;
        padding: 15px;

        .revenue_items_left {
            display: flex;
        }

        .van-image {
            width: 44px;
            height: 44px;
        }

        .revenue_numsName {
            margin-left: 20px;

            .number {
                font-weight: 600;
                font-size: 21px;
                line-height: 21px;
                color: #1A1B1C;
            }

            .des {
                font-weight: 400;
                font-size: 14px;
                line-height: 14px;
                margin-top: 9px;
                color: #8492AD;
            }
        }

        .links {
            width: 86px;
            height: 30px;
            background: #E9F0FF;
            border-radius: 15px;
            text-align: center;
            line-height: 30px;
            font-weight: 500;
            font-size: 14px;
            color: #0094FF;
        }
    }
}
.product_selection{
    width: 100%;
    height: 100vh;
    background-color: #fff;
    background: url("@/assets/newui/productList/icon_shangpinbeijing@2x.png");
    background-size: 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-flow: column;
    position: relative;
    .page_img {
        background: url("@/assets/newui/productList/icon_liushuitu@2x.png");
        background-size: 100% 100%;
        position: absolute;
        width: 60px;
        height: 60px;
        top: 44px;
        right: 63px;

    }
    .header {
        filter: blur(0px);
        height: 90px;
        padding-top: 44px;
        box-sizing: border-box;
        width: 100%;
        position: relative;
        z-index: 2001;

        :deep(.van-icon-arrow-left) {
        color: #1a1b1c !important;
        }

        :deep(.van-nav-bar__title) {
        color: #1a1b1c !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        }

        :deep(.van-nav-bar) {
        background: none !important;

        &::after {
            display: none !important;
        }
        }

        :deep(.van-nav-bar__content) {
        background-color: transparent !important;
        }
    }
}
</style>